<template>
  <div>
    <h2>机构管理</h2>
    <div>
      <!-- 条件查询 -->
      <el-input type="text" v-model="vo.mxdd" style="width: 300px" placeholder="请输入关键字" ></el-input>
      <span>&nbsp;&nbsp;&nbsp;</span>
      <el-button type="primary" icon="el-icon-search" @click="findPage()">搜索</el-button>
      <el-button type="primary" plain style="float: right">导出</el-button>
      <el-button type="primary" style="float: right" @click="xz()">新增机构</el-button>
    </div>
    <!--  表  -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 95%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="机构图片" width="120">
        <template slot-scope="scope">
          <div style="float: left; " >
            <img
              :src="scope.row.photo"
              style="width: 50px; height: 36px"/>
          </div>
          </template>
      </el-table-column>
      <el-table-column prop="id" label="编号" width="80"> </el-table-column>
      <el-table-column prop="name" label="机构名称" width="120px"></el-table-column>
      <el-table-column prop="responsibleName" label="负责人" width="120px"></el-table-column>
      <el-table-column prop="phone" label="电话" width="120px"></el-table-column>
      <el-table-column prop="address" label="机构地址" width="120px"></el-table-column>
      <el-table-column prop="status" label="状态" width="150px">
        <template slot-scope="scope">
            <el-tooltip :content="scope.row.status">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66" inactive-color="#ff4949"
              active-value="1" inactive-value="2" active-text="开启"  inactive-text="禁用"
              @change="updateStatus(scope.row.id,scope.row.status)"
            >
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
             <el-link type="primary" @click="dd(scope.row)">编辑</el-link>
             <span>&nbsp;&nbsp;&nbsp;</span>
      <el-link type="danger" @click="sc(scope.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页  -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pn"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="ps"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 新增窗口 -->
    <el-dialog   :title="pojo.id ? '编辑' : '新增机构'"  fullscreen="true" :visible.sync="dialogFormVisible">
  <el-form :model="pojo" :inline="true" label-width="100px">
    <div>
      <el-form-item  label="机构名称" >
      <el-input v-model="pojo.name" style="width: 200px;"></el-input>
    </el-form-item> 
     <el-form-item  label="联系人" >
      <el-input v-model="pojo.responsibleName" style="width: 200px;"></el-input></el-form-item>
    <el-form-item  label="联系电话" > 
       <el-input v-model="pojo.phone" style="width: 200px;"></el-input>
    </el-form-item>
    </div>
    <div>
      <el-form-item  label="机构地址" >
      <el-input v-model="pojo.address" style="width: 300px;"></el-input>
    </el-form-item>
    <!-- 图片上传 -->
    <el-form-item label="机构图片"  >
        <el-upload
            :show-file-list="false"
            :on-success="onUploadPosterSuccess"
            :before-upload="beforeUpload"
            :multiple="true"
            action="Http://localhost:8300/phl/institution/uufile"
            list-type="picture-card">
          <img v-if="fileUrl" :src="pojo.photo" id="photo" style="width: 120px; height: 120px;">点击上传
        </el-upload>
      </el-form-item>

    </div>
  <el-form-item  label="机构介绍" >
      <el-input type="textarea" v-model="pojo.introduction" style="width: 500px;"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer" style="float: left;">
    <el-button @click="dialogFormVisible = false">返 回</el-button>
    <el-button type="primary" @click="saveOrUpdate()">保 存</el-button>
  </div>
</el-dialog>
<!--  -->
<div>
    <canvas id="signatureCanvas" width="400" height="200"></canvas>
</div>

  </div>
</template>

    <script>
import axios from "axios";
export default {

 
  
  data() {
    return {
        vo:{},
        pn:1,
        ps:7,
        total:0,
        tableData: [ ],
        multipleSelection: [],
        dialogFormVisible:false,
        formLabelWidth: '120px',
        pojo:{},
        fileUrl: null,

    };
  },
  methods: {
  

    // 删除
    sc(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(`institution/delete/${id}`).then((res) => {
            this.findPage();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 添加or修改
    saveOrUpdate(){
      axios.post(`institution/saveOrUpdate`,this.pojo).then((res) => {
        this.$message.success("操作成功");
        this.dialogFormVisible = false;
        this.findPage();
        });
    },
    // 打开添加弹窗
    xz(){
      this.pojo = {};
      this.dialogFormVisible = true;
    },
    //状态变更
    updateStatus(id,status){
      console.log(id+"--------"+status)
      axios.post(`institution/updateStatus/${id}/${status}`).then((res) => {
        this.findPage();
        });
    },
    
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上传头像图片只能是 JPG、PNG 或 GIF 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
      //  文件成功上传后的回调
      onUploadPosterSuccess(res) {
      console.log(res)
      this.pojo.photo=res.data;
      console.log(this.pojo.photo+"图片");
      this.fileUrl=true;
    },
    dd(row){
        console.log(JSON.stringify(row)+"999999999999999999999");
        this.pojo = row;
        this.fileUrl=row.photo;
        this.dialogFormVisible = true;
        console.log(this.pojo.photo+"图片");
    },
// 分页查询
    findPage() {
      axios.post(`institution/findPage/${this.pn}/${this.ps}`,this.vo).then((res) => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.ps = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pn = val;
      this.findPage();
    },
    //多选框数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    this.findPage();
  },
};
</script>

<style scoped>


</style>